<template>
  <div class="wrap">
    <div class="top">
      <div class="open" @click="toggleItem">
        <a-icon v-if="opened" type="minus" />
        <a-icon v-else type="plus" />
      </div>
      <div style="flex: 1">
        <div class="toptop">
          <div class="fs16 fw500">{{ dataSource.templateName }}</div>
          <div v-if="dataSource.isFinish">
            <span style="color: rgba(166, 168, 180, 1)">完结时间：</span>
            <span>{{ formatDate(dataSource.finishDate) }}</span>
          </div>
        </div>
        <div class="detail">
          <div class="item">
            <span style="color: rgba(166, 168, 180, 1)">目前流程：</span>
            <span>{{ dataSource.currentWorkflow }}</span>
          </div>
          <div class="item">
            <span style="color: rgba(166, 168, 180, 1)">接单时间：</span>
            <span>{{ formatDate(dataSource.takeOrdersDate) }}</span>
          </div>
          <div class="item">
            <span style="color: rgba(166, 168, 180, 1)">接单客服：</span>
            <span>{{ dataSource.takeOrdersUserName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="opened" class="content">
      <div class="title">事件概况</div>
      <div class="pBox2">
        <div v-for="item in eventFields" :key="item.id" class="pItem">
          <div class="subtitle">{{ item.fieldName }}：</div>
          <div v-if="isUrl(item)" class="subcon">
            <template v-for="url in item.content.split(',')">
              <PreviewItem :url="url" :key="url" />
            </template>
          </div>
          <div v-else class="subcon">{{ deFormatValuesItem(item) }}</div>
        </div>
      </div>
      <div class="title">处理过程</div>
      <div v-for="(li, idx) in processes" :key="`${li.name}_${idx}`" class="process" :class="{ first: idx === 0 }">
        <div class="pTitle">{{ idx + 1 }} {{ li.moduleName }}</div>
        <div class="pBox">
          <div v-for="item in li.formGroupFieldList" :key="item.id" class="pItem">
            <div class="subtitle">{{ item.fieldName }}：</div>
            <div v-if="isUrl(item)" class="subcon">
              <template v-for="url in item.content.split(',')">
                <PreviewItem :url="url" :key="url" />
              </template>
            </div>
            <div v-else class="subcon">{{ deFormatValuesItem(item) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate, deFormatValuesItem } from "./funcs";
import PreviewItem from "xqjr-plugin-form/components/previewItem";
export default {
  name: "",
  components: { PreviewItem },
  mixins: [],
  props: {
    dataSource: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      opened: false,
      eventFields: [],
      processes: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.eventFields = this.dataSource.formGroupTree[1].formGroupFieldList;
    this.processes = this.dataSource.formGroupTree[2].childList;
  },
  mounted() {},
  methods: {
    isUrl(item) {
      if (item.content) {
        return item.content.includes("https://") || item.content.includes("http://");
      }
      return false;
    },
    toggleItem() {
      this.opened = !this.opened;
    },
    formatDate,
    deFormatValuesItem
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #d8d8d8;
  margin-top: 24px;
}
.top {
  display: flex;
  align-items: center;
}
.toptop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.open {
  background: var(--primary10);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--primary);
  margin-right: 12px;
  flex-shrink: 0;
  cursor: pointer;
}
.detail {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item {
    word-break: break-word;
    white-space: normal;
  }
}
.content {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed #d8d8d8;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin-bottom: 24px;
}
.process {
  border-left: 1px solid rgba(232, 232, 232, 1);
  padding: 12px 16px;
  position: relative;
  &.first {
    margin-top: -12px;
    &::after {
      position: absolute;
      content: "";
      left: -1px;
      top: 0;
      height: 20px;
      width: 2px;
      background: #fff;
      z-index: 1;
    }
  }
  &.end {
    padding-bottom: 24px;
  }
}
.pTitle {
  margin-bottom: 16px;
  color: rgba(85, 86, 93, 1);
  font-size: 16px;
  &::after {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: var(--primary);
    top: 20px;
    left: -6px;
    z-index: 2;
  }
  ::v-deep .anticon {
    color: var(--primary);
    cursor: pointer;
  }
}
.pBox {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
}
.pBox2 {
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
}
.pItem {
  width: 50%;
  display: flex;
  margin-bottom: 8px;
  .subtitle {
    width: 180px;
    text-align: right;
    color: rgba(118, 120, 133, 1);
    flex-shrink: 0;
  }
  .subcon {
    flex: 1;
  }
}
.img {
  width: 80px;
  height: 80px;
  cursor: pointer;
}
</style>
